<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>好友搜索</title>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/sweetalert2.css"/>
    <script src="../js/all.js"></script>
    <style>
        /*改变placeholder的字体颜色*/
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #808080; opacity:1;
        }

        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #808080;opacity:1;
        }

        input:-ms-input-placeholder{
            color: #808080;opacity:1;
        }

        input::-webkit-input-placeholder{
            color: #808080;opacity:1;
        }
        .layer{
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        .layer header{
            width: 100%;
            background-color:#fff;
            height: 1.3rem;
            padding-top: 0.6rem;
            position: relative;
        }
        .layer header>i{
            width: 0.6rem;
            height: 0.8rem;
            display: inline-block;
            margin-left: 0.3rem;
            background: url("../img/left.png") no-repeat center;
            -webkit-background-size: 100%;
            background-size: 100%;
            vertical-align: middle;

        }
        .layer header:before{
            content:"";
            position: absolute;
            width: 0.6rem;
            height: 0.98rem;
            left: 19.5%;
            top: 34%;
            z-index: 11;
            background: url("../img/search_03.png") no-repeat center;
            -webkit-background-size: 100%;
            background-size: 100%;

        }
        .layer header input{
            height: 0.88rem;
            position: relative;
            left: 5%;
            border: 1px solid #eeeeee;
            display: inline-block;
            width: 65%;
            background-color: #fff;
            top: 0.1rem;
            font-size: 0.36rem;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding-left: 0.8rem;
        }
        .layer header em{
            display: inline-block;
            position: relative;
            right:-5%;
            top: 10%;
            font-size: 0.34rem;
            color: #333;
            padding:0.2rem;
        }
        .main{
            width: 100%;

        }
        .main ul{
            width: 100%;
        }
        .main ul li{
            width: 100%;
            padding-left: 0.5rem;
            margin-top: 0.4rem;
        }
        .main ul li img{
            width: 15%;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 0.2rem;
        }
        .main ul .no_math{
            color:#999;
            font-size: 0.32rem;
            text-indent: 3em;
           /* margin-top: 1rem;*/
        }
        .add{
            width: 1.2rem;
            margin-right: 0.3rem;
            height: 0.8rem;
            background-color: #fff;
            border:1px solid #5f321a;
            font-size: 0.32rem;
            background: #5f321a;
            color:#FFFFFF;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<!--<div id="loading">
    <img src="../img/login.gif" alt=""/>
</div>-->
<div class="layer">
    <header>
        <i onclick="back()"></i>
        <input type="text" placeholder="手机号" autofocus class="search"/>
        <em class="finish">搜索</em>
    </header>
    <div class="main">
        <ul>
        <!--填充-->
        </ul>
    </div>
</div>
<script src="../js/x_rem.js"></script>
<script src="../js/base.js"></script>
<script src="../js/jquery.js"></script>
<script src="../js/sweetalert2.js"></script>
<script src="../js/template-web.js"></script>
<script id="search_newFriends" type="text/html">
    {{if uinfos.length==0}}
    <li class="no_math">暂时没有匹配联系人</li>
    {{else}}
    {{each uinfos as value i}}
    <li class="clearfix">
        <img src="../img/focus-img1.png" alt=""/>
        <span>徐徐 (<em>{{value.accid}}</em>)</span>
        <button class="f_right add" onclick="addFriends('{{value.accid}}')">添加</button>
    </li>
    {{/each}}
    {{/if}}
</script>
<script>
    //添加好友
    ///im/addFriend
    function addFriends(faccid){
        $.ajax({
            data:{
                //userId:userId,
                //key:$(".search").val()
                faccid:faccid,
                type:1,
                msg:"加我为好友吧"

            },
            dataType:"json",
            type:"post",
            url:baseUrl+"/im/addFriend",
            xhrFields: {
                withCredentials: true
            },
            success:function(data){
                console.log(data);
                //渲染
                if(data.code==200){
                    swal(
                            'well done!',
                            '你已添加此好友！',
                            'success'
                    ).then(function(){
                                location.href='./my_friends.html'
                            });
                }
            },
            error:function(data){
                console.log(data);
            }
        })
    }
    $(function(){
        /* $(document).ajaxStop(function(){
         $("#loading").hide();
         });*/
        var userId=localStorage.getItem('userId');
        if(userId){
            userId=userId.replace(/\"/g,"");
        }
        $(".finish").click(function(){
            // alert($(".search").val());
            //出现匹配的结果
            $.ajax({
                data:{
                    //userId:userId,
                    //key:$(".search").val()
                    mobilePhone:$(".search").val()
                },
                dataType:"json",
                type:"post",
                async:false,
                url:baseUrl+"/im/selectUserOne",
                xhrFields: {
                    withCredentials: true
                },
                success:function(data){
                    console.log(data);
                    if(data.code==200){
                        var html=template("search_newFriends",data);
                        $(".main ul").html(html);
                    }else{
                        $(".main ul").html("<li class='no_math'>暂时没有符合您查询条件的联系人</li>")
                    }

                    //渲染
                },
                error:function(data){
                    console.log(data);
                }
            })
        })

    })
</script>
</body>
</html>